<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
</head>
<body>
<div id="dataTable">
    <div th:each="cart : ${arrayList}">
        <span th:text="${cart.marketerName}"></span>
        <div th:each="c:${cart.carts}">
            <img style="width:700px;height:500px" th:src="@{'/photo/'+${c.goods.avatar}}"><br>
            商品名： <span th:text="${c.goods.goodsName}"></span>
            价格：<span th:text="${c.goods.goodsPrice}"></span>
            库存：<span th:text="${c.goods.number}"></span>
            购买数量：<span th:text="${c.goodsNumber}"></span>
            <a @click="deleteCart" th:href="@{'/deleteCart/'+${c.cartId}}">移出购物车</a>
            <form th:action="@{'/updateGoodsNumber/'+${c.cartId}}" method="post">
                <input type="hidden" name="_method" value="put">
                <input type="number" name="number" placeholder="购买数" th:max="${c.goods.number}" min="1">
                <input type="submit" value="确认">
            </form>
            <input type="radio" name="method" id="buy" value="到店购买">到店购买
            <input type="radio" name="method" id="run" value="快跑配送">快跑配送<br>
            <a @click="addOrders" th:href="@{'/addOrders/'+${c.cartId}}">购买</a>
        </div>
    </div>
</div>
<script type="text/javascript" th:src="@{/static/js/vue.js}"></script>
<script type="text/javascript" th:src="@{/static/js/axios.min.js}"></script>
<script>
    var vue = new Vue({
        el: "#dataTable",
        methods: {
            deleteCart: function (event) {
                event.preventDefault();
                let msg = "您确定要将该商品移出购物车吗";
                if (confirm(msg) == true) {
                    axios({
                        method: "delete",
                        url: event.target.href,
                    }).then(function (response) {
                        alert(response.data);
                        window.location.href = "/toCart";
                    });
                }
            },

            addOrders: function (event) {
                let msg = "您确定要购买该商品吗";
                event.preventDefault();
                if (confirm(msg) == true) {
                    var method;
                    var run = document.getElementById("run");
                    if (run.checked) {
                        method = run.value;
                    } else {
                        method = document.getElementById("buy").value;
                    }
                    axios({
                        method: "post",
                        url: event.target.href,
                        params: {method: method,}
                    }).then(function (response) {
                        alert(response.data);
                        window.location.href = "/toCart";
                    });
                }
            }
        }
    });
</script>
</body>
</html>